<template>
    <el-form class="agent-pay-form" :model="agentPayForm" :rules="agentPayFormRules" ref="agentPayFormDom"
        v-loading="loading">
        <!-- 国家 -->
        <!-- <el-form-item class="select-item">
            <div class="date-key">國家</div>
            <el-select v-model="agentPayForm.country" size="large" placeholder="請选择">
                <el-option v-for="item in countries" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item> -->
        <!-- 银行名称 -->
        <!-- <el-form-item class="select-item">
            <div class="date-key">銀行名稱</div>
            <el-select v-model="agentPayForm.bank" size="large" placeholder="請选择">
                <el-option v-for="item in banks" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item> -->
        <!-- 貨幣 -->
        <!-- <el-form-item class="select-item">
            <div class="date-key">貨幣</div>
            <el-select v-model="agentPayForm.currency" size="large" placeholder="請选择">
                <el-option v-for="item in currencies" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item> -->
        <!-- 提现金额 -->
        <!-- <el-form-item class="input-item">
            <div class="date-key">提現金額</div>
            <el-input v-model="agentPayForm.withdrawMoney" size="large" placeholder="請輸入" />
        </el-form-item> -->
        <!-- 收款账户 -->
        <!-- <el-form-item class="input-item">
            <div class="date-key">收款帳號</div>
            <el-input v-model="agentPayForm.receiveMoneyAccount" size="large" placeholder="請輸入" />
        </el-form-item> -->
        <!-- 收款人名称 -->
        <!-- <el-form-item class="input-item">
            <div class="date-key">收款人名稱</div>
            <el-input v-model="agentPayForm.receiveMoneyUser" size="large" placeholder="請輸入" />
        </el-form-item> -->
        <!-- 谷歌验证器 -->
        <!-- <el-form-item class="input-item">
            <div class="date-key">谷歌驗證器</div>
            <el-input v-model="agentPayForm.googleCode" size="large" placeholder="請輸入" />
        </el-form-item> -->
        <!-- 代付方式 -->
        <el-form-item class="select-item" prop="bank_id">
            <div class="date-key">代付方式</div>
            <el-select v-model="agentPayForm.bank_id" size="large" placeholder="請选择">
                <el-option v-for="item in agentPayMethodList" :key="item.value" :label="item.label"
                    :value="item.value" />
            </el-select>
        </el-form-item>
        <!-- 金额 -->
        <el-form-item class="input-item" prop="order_amount">
            <div class="date-key">金額</div>
            <el-input v-model="agentPayForm.order_amount" size="large" placeholder="請輸入" />
        </el-form-item>
        <!-- 账号 -->
        <el-form-item class="input-item" prop="acc_no">
            <div class="date-key">賬號</div>
            <el-input v-model="agentPayForm.acc_no" size="large" placeholder="請輸入" />
        </el-form-item>
        <!-- 提交按鈕 -->
        <el-form-item class="submit-btn-item">
            <el-button type="primary" @click="handleSubmit">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { reqCreateRepay } from '@/api/index';
import { useUserStore, useSelectOptionsStore } from '@/store/index';
import { storeToRefs } from 'pinia';
import { ElMessage } from 'element-plus';
const userStore = useUserStore();
const selectOptionsStore = useSelectOptionsStore();

const { agentPayMethodList } = storeToRefs(selectOptionsStore);
const agentPayFormDom = ref(null);
// const countries = ref([
//     { value: 'TW', label: '台灣' },
//     { value: 'US', label: '美國' },
//     { value: 'JP', label: '日本' },
//     { value: 'KR',label: '韓國' },
//     { value: 'CA', label: '加拿大' },
// ]);

// const banks = ref([
//     { value: '建设银行', label: '建设银行' },
//     { value: '工商银行', label: '工商银行' },
//     { value: '农业银行', label: '农业银行' },
//     { value: '邮政储蓄银行', label: '邮政储蓄银行' },
//     { value: '招商银行', label: '招商银行' },
//     { value: '中信银行', label: '中信银行' },
//     { value: '浦发银行', label: '浦发银行' },
//     { value: '兴业银行', label: '兴业银行' },
//     { value: '广发银行', label: '广发银行' },
//     { value: '民生银行', label: '民生银行' },
//     { value: '光大银行', label: '光大银行' },
// ]);

// const currencies = ref([
//     { value: 'rmb', label: '人民币' },
//     { value: 'usd', label: '美元' },
//     { value: 'eur', label: '欧元' },
//     { value: 'gbp', label: '英镑' },
//     { value: 'jpy', label: '日元' },
// ]);


// const agentPayForm = reactive({
//     country: '',
//     bank: '',
//     currency: '',
//     withdrawMoney: '',
//     receiveMoneyAccount: '',
//     receiveMoneyUser: '',
//     googleCode: '',
// });
const agentPayForm = reactive({
    bank_id: "",
    order_amount: "",
    acc_no: "",
});
const agentPayFormRules = {
    bank_id: [
        { required: true, message: '请选择代付方式', trigger: 'blur' },
    ],
    order_amount: [
        { required: true, message: '请输入金额', trigger: 'blur' },
    ],
    acc_no: [
        { required: true, message: '请输入账号', trigger: 'blur' },
    ],
};
const loading = ref(false);
const emit = defineEmits(['updateTable']);

const clearForm = () => {
    agentPayForm.bank_id = "";
    agentPayForm.order_amount = "";
    agentPayForm.acc_no = "";
}

const handleSubmit = () => {
    agentPayFormDom.value.validate(async (valid) => {
        if (valid) {
            loading.value = true;
            clog('reqCreateRepay参数:', {
                ...agentPayForm,
                user_id: userStore.user_id,
            })
            try {
                const res = await reqCreateRepay({
                    ...agentPayForm,
                    user_id: userStore.user_id,
                });
                clog('reqCreateRepay返回值:', res)
                loading.value = false;
                clearForm();
                ElMessage.success('提交成功');
                emit('updateTable');
            } catch (err) {
                loading.value = false;
            }
        } else {
            console.log('error submit!!');
            return false;
        }
    });
};
</script>

<style scoped lang="scss">
.date-key {
    width: 100px;
    color: #3D3D3D;
    margin-right: 20px;
}

.agent-pay-form {
    margin: 0 auto;
    width: 340px;

    :deep(.select-item) {
        .el-form-item__content {
            flex-wrap: nowrap;

            .el-select--large {
                .el-select__wrapper {
                    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
                    height: 34px;
                    padding-top: 0;
                    padding-bottom: 0;
                }
            }
        }
    }

    :deep(.submit-btn-item) {
        .el-button.el-button--primary {
            width: 140px;
            height: 34px;
            background-color: #2FC2AF;
            margin: 0 auto;
        }
    }

    :deep(.input-item) {
        .el-form-item__content {
            flex-wrap: nowrap;

            .el-input__wrapper {
                background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
                height: 34px;
            }
        }
    }
}
</style>